import React, { PureComponent } from 'react'
import { withRouter } from 'react-router-dom'
import PropTypes from 'prop-types'
import Avatar from '@/components/Avatar'
import ResponsiveImage from '@/components/ResponsiveImage'
import css from './result.module.scss'
class LotteryResult extends PureComponent {
    static propTypes = {
        prizes: PropTypes.object
    }

    get lotteryResult() {
        return this.props?.prizes?.lottery_result ?? null
    }

    get firstPrizeList() {
        return this?.lotteryResult?.first_prize_result ?? null        
    }

    get firstPrizeImg() {
        return this.props?.prizes?.first_prize_pic ?? ''
    }

    get firstPrizeDesc() {
        return this.props?.prizes?.first_prize_cmt ?? ''
    }

    get secondPrizeList() {
        return this?.lotteryResult?.second_prize_result ?? null                
    }

    get secondPrizeImg() {
        return this.props?.prizes?.second_prize_pic ?? ''
    }

    get secondPrizeDesc() {
        return this.props?.prizes?.second_prize_cmt ?? ''
    }

    get thirdPrizeList() {
        return this?.lotteryResult?.third_prize_result ?? null                
    }

    get thirdPrizeImg() {
        return this.props?.prizes?.third_prize_pic ?? ''
    }

    get thirdPrizeDesc() {
        return this.props?.prizes?.third_prize_cmt ?? ''
    }

    get prizeList() {
        const arr = [
            { id: 1, title: '一等奖名单', list: this.firstPrizeList, cover: this.firstPrizeImg, desc: this.firstPrizeDesc },
            { id: 2, title: '二等奖名单', list: this.secondPrizeList, cover: this.secondPrizeImg, desc: this.secondPrizeDesc },
            { id: 3, title: '三等奖名单', list: this.thirdPrizeList, cover: this.thirdPrizeImg, desc: this.thirdPrizeDesc }
        ]
        return arr.filter(item => !!item.list)
    }

    handleSpace = id => {
        this.props.history.push(`/space/${id}`)
    }

    render() {        
        return (
            <div className={css["wrap"]}>
                {   
                    this.prizeList.map(item => {
                        return (
                            <div key={item.id} className={css["card"]}>
                                <div className="cover">
                                    { item.cover && <ResponsiveImage className="cover-img" src={item.cover} size="@72w_72h_1c" /> }
                                </div>
                                <div className="content">
                                    <div className="head">                            
                                        <span className="title">{item.title}</span>
                                        <span className="desc">{item.desc}</span>
                                    </div>
                                    <ul className="list">
                                        {
                                            item.list.map(li => {
                                                return (
                                                    <li key={li.uid} onClick={() => this.handleSpace(li.uid)}>
                                                        <Avatar className="face" src={li.face} size="small" />
                                                        <span className="name">{li.name}</span>
                                                    </li>
                                                )
                                            })
                                        }
                                    </ul>
                                </div>                        
                            </div>
                        )
                    })                    
                }                
            </div>
        )
    }
}
export default withRouter(LotteryResult)